<route>
    {
        meta: {
            title: "编辑文件"
        }
    }
    </route>

<script setup name="personalFileEdit">
import useFileStore from '@/store/modules/file'
import {  ref } from 'vue'
import { ElInput } from 'element-plus'
import _ from 'lodash'

const route = useRoute()
const router = useRouter()

const fileStore = useFileStore()

const tagsList = ref([])
const tagVisible = ref(false)
const thisFileTags = ref(JSON.parse(route.query.o).tags)
const formRef = ref()
const form = ref({
    name: JSON.parse(route.query.o).name,
    parentId: JSON.parse(route.query.thisFile).id
})
const text = ref("")
const textVal = ref(false)
const treeList = ref([])

const pzCheckedCode = ref ([])
// 规则
const rules = ref({
    name: [
        { required: true, message: '请输入文件夹名称', trigger: 'blur' }
    ],
    parentId: [
        { required: true, message: '请输入父级id', trigger: 'blur' }
    ]
})

const props = ref ({
    label: 'name',
    children: 'children',
    disabled: 'file',
    isLeaf: 'file'
})

onMounted(() => {
    getTags()
    let o = JSON.parse(route.query.o)
    if(o.name.split(".")[1] == 'md') {
        textVal.value = true
        fileStore.getContent(o.id).then(res => {
            text.value = res
        })
    }
})

let nid = 0
const load = ref((node, resolve) => {
    if(node.data.children && node.data.children.length) {
        resolve(node.data.children)
    } else if(node.data.id) {
        fileStore.getFileList(node.data.id).then(res => {
            return resolve(res.children)
        })
    }
})

function pzCheckedChange(node, checked, leaf) {
    if (checked === true) {
        pzCheckedCode.value.push(node.code)
        form.value.parentId = node.code
    } else {
        pzCheckedCode.value = _.difference(pzCheckedCode.value, [node.code])
    }
}

function onSubmit() {
    formRef.value.validate(valid => {
        if (valid) {
            let obj = {
                fileId: JSON.parse(route.query.o).id,
                name: form.value.name,
                parentId: form.value.parentId,
                tagIds: [],
                share: JSON.parse(route.query.o).share
            }
            thisFileTags.value.forEach(item => {
                obj.tagIds.push(item.id)
            })
            fileStore.editFile(obj).then(() => {
                if(textVal.value) {
                    fileStore.writeArticle(JSON.parse(route.query.o).id, { content: text.value }).then(res => {
                        ElMessage({
                            type: 'success',
                            message: '修改成功'
                        })
                        router.go(-1)
                    })
                } else {
                    ElMessage({
                        type: 'success',
                        message: '修改成功'
                    })
                    router.go(-1)                  
                }
            }).catch(() => {})
        }
    })
}

function onCancel() {
    router.go(-1)
}

function getTags() {
    fileStore.tagsGet().then(res => {
        tagsList.value = res
    })
}

function showTagValue() {
    tagVisible.value = true
}

function reduceArr(arr) {
  const res = new Map();
  return arr.filter((item) => !res.has(item['id']) && res.set(item['id'], 1));
}

function changeTagValue(val) {
    tagVisible.value = false
    tagsList.value.forEach(item => {
        if(item.id == val) {
            thisFileTags.value.push(item)
        }
    })
    thisFileTags.value = reduceArr(thisFileTags.value)
}

function handleClose(item, index) {
    thisFileTags.value.splice(index, 1)
}

onMounted(() => {
    fileStore.getPersonalFileList().then(res => {
        treeList.value.push(res)
    })
    fileStore.getPublicFileList().then(res => {
        treeList.value.push(res)
    })
})

</script>

<template>
    <div>
        <page-main>
            <el-row>
                <el-col>
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="文件名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入修改名称" />
                        </el-form-item>
                        <el-form-item label="路径id" prop="parentId">
                            <el-tree-select
                                v-model="form.parentId"
                                lazy
                                check-strictly
                                :load="load"
                                :props="props"
                                node-key="id"
                                :data="treeList"
                            />
                        </el-form-item>
                        <el-form-item label="标签">
                            <el-tag class="mx-1" closable v-for="(item, index) in thisFileTags" @close="handleClose(item, index)">{{item.name}}</el-tag>
                            <el-select v-if="tagVisible" size="small" @change="changeTagValue">
                                <el-option v-for="item in tagsList" :value="item.id" :label="item.name"></el-option>
                            </el-select>
                            <el-button v-else class="button-n ew-tag ml-1" size="small" @click="showTagValue">新标签</el-button>
                        </el-form-item>
                        <el-form-item v-if="textVal" label="文章内容">
                            <v-md-editor v-model="text" height="400px" width="100%"></v-md-editor>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
            <el-button type="primary" size="large" @click="onCancel">取消</el-button>
        </fixed-action-bar>
    </div>
</template>
